@import "../../style/constant";


.contentContainer {
  margin-top: 12px;
  border-radius: 8px;
  background-color: #fff;
  position: relative;

  .subTitleClass {
    color: $common;
  }

  .moreTextClass {
    color: $weak;
  }

  .containerClass {
    padding-left: 16px;
    padding-top: 20px;
    background: linear-gradient(180deg, #E7F8F1 0%, #FFFFFF 100%);
  }

  .arrowClass {
    width: 16px;
    height: 16px;
    margin-left: 3px;
  }
}

.recommendUser {
  @include boxSizing();
  margin-top: 4px;
  margin-left: 16px;
  display: flex;
}


.recommendUserList {
  @include boxSizing();
  @include ifndef(white-space, nowrap, rn);
  align-items: center;
  @include ifndef(display, inline-block, rn);
}

.recommendDoctor {
  width: 238px;
  @include ifndef(display, inline-block, rn);
  margin-right: 16px;
  height: 130px;
  &.firstCard {
    margin-left: 16px;
  }

  :global(.user-name-container) {
    :global(.user-title) {
      color: $weak;
    }
  }

  :global(.user-group-container) {
    margin-top: 4px;
  }

  :global(.userAvatar) {
    width: 46px;
    height: 46px;
  }

  :global(.user-group) {
    color: $primaryBlack;
  }

  :global(.user-card) {
    background-color: #F9FAF9;
    box-shadow: none;

    :global(.labels) {
      margin-top: 8px;
    }

    :global(.user-major) {
      margin-top: 12px;
    }
  }
}

.refreshDoctor {
  @include ifndef(display, inline-block, rn);
  padding-right: 16px;
  height: 130px;
  @include boxSizing();
}

.refreshContent {
  background-color: #fff;
  height: 128px;
  border-radius: 8px;
  @include homeBoxShadow();
  width: 56px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.refreshText {
  line-height: 18px;
  color: $common;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 14px;
}

.refreshBtn {
  width: 16px;
  height: 16px;
  margin-top: 12px;
}

.scrollView {
  position: relative;
  display: flex;
  margin-top: 4px;
  flex-direction: row;
}
.scrollViewContent{
  padding-bottom: 20px;
}
.leftLinear {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 15px;
  width: 28px;
  @include ifndef(background, linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%), rn);
  z-index: 1;
}

.rightLinear {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 15px;
  width: 28px;
  @include ifndef(background, linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), rn);
  z-index: 1;
}
